<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    label {
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 10px;
    }

    select {
        padding: 5px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 200px;
        margin-bottom: 10px;
    }
</style>
</head>

<body>
    <label>选择省份：</label>
    <select id="province">
        <option value="">请选择</option>
        <option value="湖南省">湖南省</option>
        <option value="江西省">江西省</option>
        <option value="湖北省">湖北省</option>
        <!-- 其他省份选项 -->
    </select>
    <select id="city">
        <option value="">请选择</option>
        <!-- 根据省份选择对应的城市选项 -->
    </select>
    <select id="district">
        <option value="">请选择</option>
        <!-- 根据城市选择对应的县区选项 -->
    </select>
    <select id="street">
        <option value="">请选择</option>
        <!-- 根据县区选择对应的街道选项 -->
    </select>

    <body>



        <script>
            // 省份、城市、县区、街道数据
            var data = {
                "湖南省": {
                    "长沙市": {
                        "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                        "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],

                    },
                },
                "江西省": {
                    "南京市": {
                        "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                        "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],

                    },
                },
                "湖北省": {
                    "武汉市": {
                        "江夏区": ["光谷大道", "景山街道", "交道口街道", "安定门街道"],
                        "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                    },
                    '随州市': {
                        "曾都区": ["光谷大道", "景山街道", "交道口街道", "安定门街道"],
                        "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                    }
                },
            };
            // 选择省份后更新城市选项
            function updateCity() {
                var province = document.getElementById("province").value;
                var citySelect = document.getElementById("city");
                citySelect.innerHTML = "";
                var districtSelect = document.getElementById("district");
                districtSelect.innerHTML = "";
                var streetSelect = document.getElementById("street");
                streetSelect.innerHTML = "";
                if (province == "") {
                    return;
                }
                var cities = data[province];
                for (var city in cities) {
                    var option = document.createElement("option");
                    option.value = city;
                    option.innerHTML = city;
                    citySelect.appendChild(option);
                }
                updateDistrict();
            }

            // 选择城市后更新县区选项
            function updateDistrict() {
                var province = document.getElementById("province").value;
                var city = document.getElementById("city").value;
                var districtSelect = document.getElementById("district");
                districtSelect.innerHTML = "";
                var streetSelect = document.getElementById("street");
                streetSelect.innerHTML = "";
                if (province == "" || city == "") {
                    return;
                }
                var districts = data[province][city];
                for (var district in districts) {
                    var option = document.createElement("option");
                    option.value = district;
                    option.innerHTML = district;
                    districtSelect.appendChild(option);
                }
                updateStreet();
            }

            // 选择县区后更新街道选项
            function updateStreet() {
                var province = document.getElementById("province").value;
                var city = document.getElementById("city").value;
                var district = document.getElementById("district").value;
                var streetSelect = document.getElementById("street");
                streetSelect.innerHTML = "";
                if (province == "" || city == "" || district == "") {
                    return;
                }
                var streets = data[province][city][district];
                for (var i = 0; i < streets.length; i++) {
                    var option = document.createElement("option");
                    option.value = streets[i];
                    option.innerHTML = streets[i];
                    streetSelect.appendChild(option);
                }
            }

            // 监听省份选项变化事件
            document.getElementById("province").addEventListener("change", updateCity);

            // 监听城市选项变化事件
            document.getElementById("city").addEventListener("change", updateDistrict);

            // 监听县区选项变化事件
            document.getElementById("district").addEventListener("change", updateStreet);
        </script>
    </body>

</html>